<!-- templates/movie_detail.html -->
{% extends "base.html" %}

{% block title %}{{ movie.title }} - 电影详情{% endblock %}

{% block content %}
<div class="container">
    <!-- 电影详情头部 -->
    <div class="row mb-4">
        <div class="col-12">
            <div class="movie-detail-header">
                <div class="row align-items-center">
                    <div class="col-md-8">
                        <h2 class="mb-2">{{ movie.title or 'Movie ' + movie.movieId|string }}</h2>
                        <p class="mb-2">
                            <span class="badge bg-{{ pool_color.get(movie.pool, 'secondary') }} me-2">
                                {{ pool_names.get(movie.pool, movie.pool) }}
                            </span>
                            {% for genre in movie.genres[:3] %}
                            <span class="badge bg-light text-dark me-1">{{ genre }}</span>
                            {% endfor %}
                        </p>
                        <div class="row">
                            <div class="col-md-6">
                                <p class="mb-1">
                                    <i class="fas fa-star me-1"></i>
                                    评分: {{ "%.1f"|format(movie.avg_rating) }}/5.0
                                </p>
                                <p class="mb-1">
                                    <i class="fas fa-users me-1"></i>
                                    {{ movie.rating_count }} 人评价
                                </p>
                            </div>
                            <div class="col-md-6">
                                <p class="mb-1">
                                    <i class="fas fa-chart-line me-1"></i>
                                    质量分数: {{ "%.1f"|format(movie.quality_score) }}
                                </p>
                                <p class="mb-1">
                                    <i class="fas fa-tag me-1"></i>
                                    电影ID: {{ movie.movieId }}
                                </p>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4 text-end">
                        <button class="btn btn-success btn-lg me-2" onclick="likeMovie({{ movie.movieId }})">
                            <i class="fas fa-heart me-1"></i>喜欢
                        </button>
                        <button class="btn btn-warning btn-lg" onclick="showRatingModal({{ movie.movieId }})">
                            <i class="fas fa-star me-1"></i>评分
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 相似电影推荐 -->
    {% if similar_movies %}
    <div class="row">
        <div class="col-12">
            <h4 class="mb-3">
                <i class="fas fa-film me-2"></i>相似电影推荐
            </h4>
            <div class="row similar-movies">
                {% for similar_movie in similar_movies %}
                <div class="col-lg-4 col-md-6 mb-3">
                    <div class="card movie-card h-100">
                        <div class="card-header bg-{{ pool_color.get(similar_movie.pool, 'secondary') }} text-white py-2">
                            <small class="text-uppercase">
                                <i class="fas fa-tag me-1"></i>{{ pool_names.get(similar_movie.pool, similar_movie.pool) }}
                            </small>
                        </div>

                        <div class="card-body">
                            <h6 class="card-title">{{ similar_movie.title or 'Movie ' + similar_movie.movieId|string }}</h6>

                            <div class="movie-info mb-2">
                                <small class="text-muted">
                                    <i class="fas fa-star me-1"></i>{{ "%.1f"|format(similar_movie.avg_rating) }}
                                    <span class="ms-2">
                                        <i class="fas fa-users me-1"></i>{{ similar_movie.rating_count }}
                                    </span>
                                </small>
                            </div>

                            <div class="genres mb-2">
                                {% for genre in similar_movie.genres[:2] %}
                                <span class="badge bg-light text-dark me-1">{{ genre }}</span>
                                {% endfor %}
                            </div>
                        </div>

                        <div class="card-footer bg-transparent">
                            <button type="button" class="btn btn-outline-primary btn-sm w-100"
                                    onclick="viewMovie({{ similar_movie.movieId }})">
                                <i class="fas fa-eye me-1"></i>查看详情
                            </button>
                        </div>
                    </div>
                </div>
                {% endfor %}
            </div>
        </div>
    </div>
    {% endif %}
</div>

<!-- 评分模态框 -->
<div class="modal fade" id="ratingModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">为电影评分</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <div class="text-center">
                    <p>请为《{{ movie.title }}》打分：</p>
                    <div class="rating-stars mb-3">
                        {% for i in range(1, 6) %}
                        <i class="fas fa-star rating-star" data-rating="{{ i }}"></i>
                        {% endfor %}
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                <button type="button" class="btn btn-primary" onclick="submitRating()">提交评分</button>
            </div>
        </div>
    </div>
</div>
{% endblock %}